<template>
	<view class="QS-Gradient-Swiper-Item">
	<!-- #ifdef APP-NVUE -->
	<view 
	class="QS-Gradient-Swiper-Item"
	:style="{
		'height': height + 'px',
		'width': width + 'px'
	}">
		<image 
		class="QS-Gradient-Swiper-Item-image" 
		:style="{
			'height': (Number(height) - 5) + 'px',
			'width': (Number(width) - 5) + 'px',
			'left': (Number(width)/2 - (Number(width) - 5)/2) + 'px',
			'bottom': '0px'
		}" @tap="click"
		:src="item.path" mode="aspectFill"></image>
	</view>
	<!-- #endif -->
	<!-- #ifndef APP-NVUE -->
	<view class="QS-Gradient-Swiper-Item">
		<image class="QS-Gradient-Swiper-Item-image" :style="{ width: width + 'px', borderRadius: imgBorderRadius }" :src="item.path" mode="aspectFill" @tap="click"></image>
	</view>
	<!-- #endif -->
	</view>
</template>

<script>
	import rpxUnit2px from '../../../js/functions/rpxUnit2px.js';
	export default {
		inject: [ 'gradientSwiper' ],
		props: {
			item: {
				type: Object,
				default() {
					return {};
				}
			},
			index: {
				type: Number,
				default: -1
			},
			imgHeight: {
				type: [String, Number],
				default: ''
			},
			imgWidth: {
				type: [String, Number],
				default: '730rpx'
			},
			imgBorderRadius: {
				type: String,
				default: '10rpx'
			}
		},
		computed: {
			height() {
				return rpxUnit2px(this.imgHeight);
			},
			width() {
				return rpxUnit2px(this.imgWidth);
			}
		},
		created() {
			// #ifdef APP-NVUE
			console.log('height:' + this.height);
			console.log('width:' + this.width);
			// #endif
		},
		methods: {
			click() {
				this.gradientSwiper.$emit('click', this.item)
			}
		},
	}
</script>

<style scoped>
	.QS-Gradient-Swiper-Item{
		/* #ifndef APP-NVUE */
		height: 100%;
		width: 100%;
		/* #endif */
		position: relative;
	}
	.QS-Gradient-Swiper-Item-image{
		position: absolute;
		/* #ifndef APP-NVUE */
		left: 50%;
		top: 50%;
		height: 100%;
		transform: translate(-50%, -50%);
		/* #endif */
		background-color: #BCEAFF;
	}
</style>
